<template>
	<view>
		<view class="feedBox" v-for="(items, index) in problem_Box" :key="index">
			<view class="feedTitle">{{ items.problemTitle }}</view>
			<view class="feedConBox">
				<view
					class="feedTextBox flex align-center justify-between"
					hover-class="contentHover"
					hover-stay-time="50"
					@click="goFeedDetail(item)"
					v-for="(item, idx) in items.problemList"
					:key="idx"
				>
					<view class="feedText">{{ item.title }}</view>
					<view class="cuIcon-right padding-right"></view>
				</view>
			</view>
		</view>
	
		<view class="footBtnBlock"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
			problem_Box: [
				{
					problemTitle: '1、热门问题',
					problemList: [
						{
							title: 'a.如何修改手机号码',
							pbmId: 0
						},
						{
							title: 'b.为什么收到分享公测通知了，仍无法分享？',
							pbmId: 2
						},
						{
							title: 'b.为什么收到分享公测通知了，仍无法分享？',
							pbmId: 3
						}
					]
				},
				{
					problemTitle: '2、分享相关',
					problemList: [
						{
							title: 'a.为什么提示“该文件类型不支持分享”？',
							pbmId: 4
						},
						{
							title: 'b.转存的文件大小超过剩余空间怎么办？',
							pbmId: 5
						},
						{
							title: 'c.如何分享多个文件？',
							pbmId: 6
						},
						{
							title: 'd.怎么分享「相册，中的图片/视频？',
							pbmId: 7
						},
						{
							title: 'e.分享文件的大小/数量，是否有限制？',
							pbmId: 8
						}
					]
				}
			]
		};
	},
	methods: {
		goFeedDetail(item) {
			uni.navigateTo({
				url: `helpdetail/helpdetail?title=${item.title}`
			});
		},
		
	}
};
</script>

<style lang="scss">
.feedBox {
	margin: 30rpx;

	.feedTitle {
		font-size: 32rpx;
		font-weight: bold;
		color: #1d1d21;
		margin: 20rpx 0;
	}
	.feedConBox {
		background: #ffffff;
		box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
		border-radius: 16rpx;

		.feedTextBox {
			border-top: 1rpx solid rgba(213, 213, 213, 0.2);
		}

		.feedText {
			padding: 30rpx;
			font-size: 30rpx;
			color: #1d1d21;
		}

		&:nth-of-type(1) {
			border-top: none;
		}
	}
}
.footBtnBox {
	display: flex;
	position: fixed;
	bottom: 0rpx;
	background-color: #f2f2f2;
	width: 100%;
	height: 140rpx;
	.footBox {
		width: 92%;
		height: 120rpx;
		padding: 30rpx;
		margin: 10rpx 30rpx 20rpx;
		background: #ffffff;
		box-shadow: 0px 0px 10px rgba(193, 193, 193, 0.2);
		border-radius: 16rpx;
	}

	.footIconBox {
		width: 33.33%;
		text-align: center;

		.cu-btn {
			padding: 0;
			background-color: #ffffff;
			line-height: 50rpx;
		}
	}

	.footIcon {
		font-size: 40rpx;
	}

	.footText {
		font-size: 30rpx;
		color: #1d1d21;
	}
}
.footBtnBlock {
	width: 100%;
	height: 150rpx;
}
.opacityHover {
	opacity: 0.6 !important;
}
</style>
